<template>
    <div class="about">
        <button @click="goAbout">跳转到about</button>
        <h1>This is an Home page</h1>
        {{$route.meta.keepAlive}}
    </div>
</template>

<script setup>
import { onDeactivated, onActivated } from 'vue'
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRouter } from 'vue-router'
const router = useRouter()

onActivated(() => {
    console.log('111');
})
onDeactivated(() => {
    console.log('222');
})
const goAbout = () => {
    router.push('/')
}
onBeforeRouteLeave((to, from) => {
    // console.log('111');
    // this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // console.log(this.scrollTop);
})

//进入该页面时，用之前保存的滚动位置赋值
onBeforeRouteUpdate((to, from, next) => {
    console.log('222');
    next((vm) => {
        document.body.scrollTop = vm.scrollTop;
        console.log(vm.scrollTop);
    });
})
</script>

<style scoped>
.about {
    padding: 500px;
    height: 3000px;
    overflow: auto;
}
</style>
